<template>
	<div>
		<div class="register-type" style="margin-top: 0;">
			<div class="name">
				<span>供应商名称<img src="../../images/start.png"></span>
				<input type="text" v-model="vebdorName" placeholder="请填写供应商名称" />
			</div>
			<div class="name">
				<div class="my-content-list" @click="provincePop">
					 <div>
						<span style="margin-right: 0.6rem;">供应商所在省<img src="../../images/start.png"></span>
						<input class="text-hui" placeholder="请选择所在省" v-model="province" />
					</div>
				</div>
				<mt-popup v-model="propopupVisible" popup-transition="popup-fade" closeOnClickModal="false" position="bottom">
					                <mt-picker :slots="dataList" @change="ProvinceValuesChange" ref='picker' showToolbar value-key='name'>
						                    <div class="picker-toolbar-title">
							                        <div class="usi-btn-cancel" @click="propopupVisible = !propopupVisible">取消</div>
							                        <div class="">供应商所在省</div>
							                        <div class="usi-btn-sure" @click="propopupVisible = !propopupVisible">确定</div>
							                    </div>
						            </mt-picker>
				</mt-popup>
			</div>
			<div class="name">
				<div class="my-content-list" @click="cityPop">
					 <div>
						<span style="margin-right: 0.6rem;">供应商所在市<img src="../../images/start.png"></span>
						<input class="text-hui" placeholder="请选择所在市" v-model="city" />
					</div>
				</div>
				<mt-popup v-model="citypopVisible" popup-transition="popup-fade" closeOnClickModal="false" position="bottom">
					                <mt-picker :slots="cityList" @change="CityValuesChange" ref='picker' showToolbar value-key='name'>
						                    <div class="picker-toolbar-title">
							                        <div class="usi-btn-cancel" @click="citypopVisible = !citypopVisible">取消</div>
							                         <div class="">供应商所在市</div>
							                         <div class="usi-btn-sure" @click="citypopVisible = !citypopVisible">确定</div>
							                    </div>
						            </mt-picker>
				</mt-popup>
			</div>
			<div class=" name">
				<span>供应商地址<img src="../../images/start.png"></span>
				<input type="text" v-model="vebdorAddress" placeholder="请填写供应商所在地" />
			</div>
			<div class="name  select-type">
				<span>供应商类型<img src="../../images/start.png"></span>
				<i class="iconfont icon-sanjiaodown vebdorIcon" @click="personType()"></i>
				<input type="text" v-model="vebdorType" disabled="disabled" placeholder="请选择供应商类型" />
				<ul class="name_ul person_type" v-if='person_type'>
					<li v-for="(item,index) in vebdorList" :key='index' :class="{active:index==isActive}" @click="checkitem(index,item)">
						<b>{{item}}</b>
					</li>
				</ul>
			</div>
			<div class=" name select-type">
				<span>证件类型<img src="../../images/start.png"></span>
				<i class="iconfont icon-sanjiaodown documentIcon" @click="personType2()"></i>
				<input type="text" v-model="documentType" class="document-type" disabled="disabled" placeholder="请选择证件类型" />
				<ul class="name_ul card" v-if='document_type'>
					<li v-for="(item,index) in documentList" :key='index' :class="{active:index==isActive2}" @click="checkitem2(index,item)">
						<b>{{item}}</b>
					</li>
				</ul>
			</div>
			<div class="name">
				<span>公司电话<img src="../../images/start.png"></span>
				<input type="tel" v-model="companyPhone" placeholder="请填写公司电话" />
			</div>
			<div class="name select-type">
				<span>业务范围<img src="../../images/start.png"></span>
				<i class="iconfont icon-sanjiaodown scopeBusiness" @click="selectClick()"></i>
				<input type="text" class="scope-business" v-model="valueName" disabled="disabled" placeholder="请选择业务范围" />
			</div>

			<mt-popup v-model="selectType" popup-transition="popup-fade" closeOnClickModal="false" position="bottom">
				<div class="picker-toolbar-title">
					                        <div class="usi-btn-cancel" @click="selectType = !selectType">取消</div>
					                         <div class="">选择业务范围</div>
					                         <div class="usi-btn-sure" @click="selectType = !selectType">确定</div>
					                    </div>
				<mt-checklist align="right" @change='checkon($event)' v-model="value" :options="options"></mt-checklist>
			</mt-popup>

			<div class="name">
				<span>联系人<img src="../../images/start.png"></span>
				<input type="text" v-model="linkMan" placeholder="清填写联系人" />
			</div>
			<div class=" name">
				<span>联系人手机<img src="../../images/start.png"></span>
				<input type="tel" class="linkman-phone" placeholder="请填写联系人手机" />
			</div>
			<div class=" name">
				<span>联系人邮箱<img src="../../images/start.png"></span>
				<input type="email" class="linkman-email" placeholder="请填写联系人邮箱" />
			</div>
			<div class=" name" style="border-bottom: 0;">
				<span>备注</span>
			</div>
			<textarea name="" class="remarks"></textarea>
		</div>
		<div class="demos-content-padded" style="margin: 1.6rem 0;padding: 0 1.1rem;">
			<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" style="float: left;">取消</a>
			<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" @click="nextTip()" style="float: right;margin-top: 0;background: #28c81e;">下一步</a>
		</div>
	</div>
</template>

<script>
	import {
		getAllAreaOne,
		getAllProvince,
		getFgCategoryList,
		addOrEditClient
	} from '../../config/api'
	import {
		Picker,
		Popup,
		Checklist
	} from 'mint-ui'
	import {
		Dialog
	} from 'we-vue'
	export default {
		data() {
			return {
				vebdorName: '', //供应商名称
				province: '', //供应商所在省份
				provinceId: '',
				city: '', //供应商所在市区
				cityId: '',
				vebdorAddress: '', //供应商所在详细地址
				vebdorType: '', //供应商类型
				documentType: '', //证件类型
				vebdorList: ['企业', '个人'],
				documentList: [],
				companyPhone: '', //公司电话
				linkMan: '', //公司联系人
				fruitPickerShow: false,
				dayPickerShow: false,
				showToolbar: true,
				ProvinceSlots: [], //省数组集合
				CitySlots: [], //市集合
				propopupVisible: false,
				citypopVisible: false,
				selectType: false,
				isActive: 0,
				isActive2: 0,
				person_type: false,
				document_type: false,
				value: [],
				options: [],
				valueName:[]
			}
		},
		computed: {
			dataList() {
				let dataSlots = [{
					flex: 1,
					values: this.ProvinceSlots,
					className: 'slot1',
					textAlign: 'center'
				}]
				return dataSlots
			},
			cityList() {
				let dataSlots2 = [{
					flex: 1,
					values: this.CitySlots,
					className: 'slot1',
					textAlign: 'center'
				}]
				return dataSlots2
			}
		},
		created() {
			getAllAreaOne().then(res => {
				this.ProvinceSlots = res.content
			})
			getFgCategoryList().then(res=>{
				this.options = res.content
				this.options.forEach(item=>{
					this.$set(item,'label',item.materialName)
					this.$set(item,'value',item.id)
				})
			})
			
		},

		methods: {
			provincePop() {
				this.propopupVisible = true
			},
			cityPop() {
				this.citypopVisible = true
			},
			ProvinceValuesChange(picker, values) {
				if (values[0]) {
					this.province = values[0].name;
					this.provinceId = values[0].id
				}
				if (values[0] > values[1]) {
					picker.setSlotValue(1, values[0]);
				}
				getAllProvince(this.provinceId).then(res => {
					if (res.code == 100) {
						this.CitySlots = res.content
					}
				})
			},
			CityValuesChange(picker, values) {
				if (values[0]) {
					this.city = values[0].name;
					this.cityId = values[0].id
				}
				if (values[0] > values[1]) {
					picker.setSlotValue(1, values[0]);
				}
			},
			checkitem(index, item) {
				this.isActive = index
				this.vebdorType = item
				this.person_type = false
				this.documentType = ''
			},
			personType() {
				this.person_type = !this.person_type
			},
			personType2() {
				if (!this.vebdorType) {
					Dialog({
						message: '请先选择供应商类型'
					})
				} else {
					if (this.vebdorType == '个人') {
						this.documentList = ['身份证']
					} else {
						this.documentList = ['三证与法人身份证', '三证合一与法人身份证']
					}
					this.document_type = !this.document_type
				}
			},
			checkitem2(index, item) {
				this.isActive2 = index
				this.documentType = item
				this.document_type = false
			},
			selectClick() {
				this.selectType = true
			},
			checkon(event) {
				let valueName = []
				this.options.forEach((item)=>{
					this.value.forEach((items)=>{
						if(item['id']==items){
							valueName.push(item['materialName'])
						}
					})
				})
				this.valueName = valueName
			},
			//提交
			nextTip(){
			// 	if (!this.vebdorName) {
   //              $.toptip('请填写供应商名称', 1000, 'error');
   //          } else if (!address) {
   //              $.toptip('请选择供应商所在地', 1000, 'error');
   //          } else if (!vebdor_address) {
   //              $.toptip('请填写供应商详细地址', 1000, 'error');
   //          } else if (vebdor_type === "") {
   //              console.log(vebdor_type)
   //              $.toptip('请选择供应商类型', 1000, 'error');
   //          } else if (document_type === "") {
   //              $.toptip('请选择证件类型', 1000, 'error');
   //          } else if (!company_phone) {
   //              $.toptip('公司电话不能为空', 1000, 'error');
   //          } else if (checkPhone(company_phone) != company_phone) {
   //              $.toptip("请输入正确的电话号码", 1200, 'error');
   //          } else if (!id) {
   //              $.toptip("请选择业务范围", 1200, 'error');
   //          } else if (!link_man) {
   //              $.toptip("联系人不能为空", 1200, 'error');
   //          } else if (linkman_phone === "") {
   //              $.toptip("手机号不能为空", 1200, 'error');
   //          } else if (checkMobile(linkman_phone) == 0) {
   //              $.toptip("请输入正确的手机号", 1200, 'error');
   //          } else if (checkMobile(linkman_phone) == false) {
   //              $.toptip("请输入正确的手机号", 1200, 'error');
   //          } else if (!linkman_email) {
   //              $.toptip("邮箱不能为空", 1200, 'error');
   //          } else if (checkEmail(linkman_email) != linkman_email) {
   //              $.toptip("邮箱格式不正确", 1200, 'error');
   //          } else {
			}
		}
	}
</script>

<style scoped="scoped" lang="css">
	.weui-cell {
		padding: 0
	}

	.mint-popup-bottom {
		width: 100%;
	}

	.picker {
		width: 100%;
	}

	.picker-toolbar-title {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 40px;
		line-height: 40px;
		font-size: 16px;

	}

	.usi-btn-cancel,
	.usi-btn-sure {
		color: #FF6600
	}

	.mint-cell-wrapper {
		padding: 0;
	}

	.mint-checklist {
		max-height: 14rem;
		overflow-y: scroll;
	}
</style>
